Más iconos a redes sociales

cheth studios

webtoolkit4.me

naupe

Los fotógrafos tiene una lucha constante con la forma de proteger sus fotografías, porque una vez colgadas en internet dejan de ser privadas para ser públicas a no ser que tengan el acceso restringido y las usen para su disfrute personal, aún así sigo pensando que una vez subimos una imagen a internet perdemos el control total sobre ella y debemos asumir las consecuencias.

Hay algunas formas de hacer que no se lleven las fotografías, una de ellas es inhabilitando el botón derecho del ratón, pero no es más que una estrategia para hacer perder el tiempo a la persona que desea llevarse la fotografía porque casi todos sabemos que desde el código fuente del blog podemos acceder a la url de la imagen.

Watermark es uno de esos sitios online al igual que Signgenerator, Picmarkr, Watermarktool o PicGhost con la diferencia que además de añadir texto también podemos añadir como marca de agua una imagen.

La imagen que normalmente descargamos a nuestro PC la obtenemos en un archivo zip, debemos descargarlo y extraer la imagen para hacer uso de ella.

Desde la salida del diseñador de plantillas muchos optaron por la facilidad que proporciona diseñar la plantilla en unos sencillos pasos, no voy a entrar en detalles sobre si es mejor o peor, más o menos recomendable que personalizar la plantilla uno mismo porque lo que para unos es mejor para otros puede terminar en una odisea.

Naturalmente tengo mi opinión y es que las plantillas creadas con el diseñador no sólo cambian el diseño exterior sino también el interior es decir, que la plantilla es completamente distinta a lo que estamos acostumbrados a ver y los códigos que veremos serán como poco muy extraños.

No hay garantías de poder aplicar los tutoriales o explicaciones que normalmente encontramos para Blogger, si tenemos tiempo de sobra y no sabemos que hacer entonces no hay problema utilicemos el diseñador y a divertirse pero si pensamos que la plantilla es algo que en un futuro vamos a modificar hay que pensarlo dos veces.

¿Por qué digo todo esto? porque llegan preguntas y dudas, muchas dudas sobre la forma de hacer esto o aquello una vez tenemos instalada una de las nuevas plantillas y en la mayoría de casos no tengo respuesta porque para tenerla es necesario dedicar horas a cada caso en concreto y como decía anteriormente sin garantías de encontrar la solución.

Las nuevas plantillas me recuerdan un poco a las plantillas adaptadas de otras plataformas en general son bellas, originales y complicadas de entender porque en la adaptación no se ha tomado la precaución de sustituir los códigos por los originales de Blogger ni de limpiar el código inutilizable.

Me recuerdan también cuando compramos un electrodoméstico, hay que entender el manejo, configurarlo, ponerlo en marcha y siempre pensamos que algo más sencillo nos haría el mismo papel, dos botones uno para encender y otro para apagar y menos historias que nos compliquen la vida.

Las nuevas plantilla son eso, uno simple clikc y un nuevo diseño en menos que canta un gallo, pero es que resulta que antes de darnos cuenta ese electrodoméstico complicado lo usamos todos los días y terminamos configurandolo con los ojos cerrados. Y con el tiempo nos alegramos de tener un aparato con diversas funciones que lo manejamos y configuramos a nuestro antojo, esas son las plantillas originales de Blogger las que se prestan a casi todo y se dejan manejar.

Las plantillas que Blogger proporcionaba antes de aparecer el diseñador y las nuevas plantillas siguen estando a disposición de todos para descargarlas y lógicamente usarlas, las encontraremos si en plantilla de Edición de HTML nos situamos al final del todo donde dice:

Aunque la imagen está cortada justo después de Plantillas antiguas dice:

"Puedes utilizar todavía las plantillas antiguas para tu blog, pero no podrás acceder a muchas de las funciones nuevas como, por ejemplo, el Diseñador de plantillas"

A pesar de lo que dice ahí he probado varias veces a instalar plantillas "antiguas" y en todas aparece la opción de diseñador de plantillas, otras mejoras como el nuevo editor de entradas tiene las mismas funciones y que yo recuerde no hay muchas más.

Como siempre a la pregunta de ¿Qué hago me la instalo de las nuevas? la respuesta es siempre la misma instala la que mejor se ajuste a tus necesidades pero ten en cuenta todo lo anterior y si piensas modificar la plantilla entonces intenta instalarla en un blog de pruebas y juega con ella porque te vas a entretener.

Si pasado un tiempo prudencial te haces con el manejo, la personalizas y consigues que todos los trucos que deseas añadir funcionen entonces ¡Enhorabuena! esperamos tus aportes con ilusión y con ellos se habrá dado un gran paso que seguramente pasará a la historia.

Visto en:Pokkisam

Los experimentos de dhteumeuleu son espectaculares, pero como bien dijo JMiur en su día no hay explicación, están creados con la idea de pasar el rato y divertirse, simplemente porque sí, por  la satisfacción de conseguir que funcione.

En xyberneticos nos muestran un bonito efecto que nos permite añadir una imagen con texto oculto que se muestra al pasar el cursor.

Para el ejemplo he añadido una imagen pero el autor ha creado una galería, es posible añadir cualquier número de imágenes siempre que tengamos en cuenta que la suma del ancho de las imágenes no sea superior al espacio donde vamos a añadirlo.

La galería del autor la podemos conseguir de la siguiente forma.
Si estamos utilizando jQuery seguramente ya tenemos añadido el siguiente script en nuestra plantilla, de no tenerlo lo añadimos antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Y a continuación el siguiente:

<script type='text/javascript'>
$(document).ready(function()
{
 $(&#39;.galleryImage&#39;).hover(
  function()
  {

  $(this).find(&#39;img&#39;).animate(
                { width:100,
                  marginTop:10,
                  marginLeft:10
                }, 500);

   },
   function()
   {

    $(this).find(&#39;img&#39;).animate(
                 {width:325,
                  marginTop:0,
                  marginLeft:0
                },300);

   });
});
</script>

Los estilos los añadimos antes de ]]></b:skin>

.galleryContainer
{
width: 1024px; /*  Ancho del contenido */ 
}
.galleryImage {   /* Las imágenes */ 
     background-color:black;
     width:325px;
     height:260px;
     overflow:hidden;
     margin:5px;
     float:left;
}
.info{   /*  Texto adicional */ 
margin-left:10px;
font-family:arial;
padding:3px;
}
.info h2{  /* Títulos */ 
color:gray;
}
.info p {
color:white;
}
.clear {
clear:both;
margin-top:10px;
}

Una vez tenemos añadido lo anterior guardamos los cambios y en un gadget de HTML incluimos las imágenes y el texto:

<div class="galleryContainer">
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
<div class="galleryImage">
<img src="url-imagen">
<div class="info">
<h2>Título</h2>

Texto adicional.


</div>
</div>
</div>

Más sitios para descargar fuentes gratuitas, urbanfonts ofrece la posibilidad de escoger color de fuente y fondo, como puede verse en la captura también proporciona distintos tamaños de texto de esa forma nos podemos hacer una idea del resultado final antes de utilizarla.

En Pczeros he visto una explicación muy sencilla para que las visitas puedan cambiar el color de fondo del blog con un simple click, se trata de un gadget con unas imágenes a modo de cuadritos que bien pueden ser cualquier otra imagen, dicha imagen funciona con el evento onclick y al marcar sobre ella cambia el color de fondo del blog.

Para probar he creado unas imágenes de muestra que como decía pueden sustituirse por otras creadas por nosotros, la forma de añadirlo es muy sencilla simplemente copiamos el siguiente código y lo añadimos allí donde deseamos mostrarlo, si se trata de un gadget escogeremos para añadirlo HTML/Javascript.

<div style="text-align: center;">
<a href="#" onclick="javascript:document.body.style.backgroundColor='#AA0104'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr3n1g27H5IP9lpUlorH8GBmoKVX2tzlYifyvdoA4bwKxSBFpxzuJdkXW5VB8Zm_3-eSqrJ8Zmk3XLcdmkyYlEWQN2xlceGfZfHLwAw1RamJ7BgZrHJl4okhibLMe9PjKifegE/s0/rojo2.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#199686'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwkwJdcnQcsf8L_tedSozDsan_0duazFnVtsUQE5hKGeOqLegCC0EalCb9IEY4FltdYBaZG3zhGBzIkrdn65mSC7fIFUbbhpZSGc2g1DzCHyHHOnjSXUNuxoOtFxEjKUD_QMv/s0/azul1.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH7SMNnea1XM7wwsAKO3lMkOH6sQjDvWtflS392qF4yF9J-F5yxodKGsyeiaW2mIW5m2ykWrPQbBVJBRvD9FPyMji_g87X7IB_grmJX6CJKCDRQksg5Je3A4BfqU93tbfFKVT-/s0/blanco4.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihRkta2VuNOfYq3nm9uwfF5LBMx42tOUb0MdCtvfmJxOBxgUvylN6ZBHYgQzvC3fQvJ_TlGOUuzKNOcYPoPe33twHhPXPnqVsG2z9b0q3wiXH8uuiQSqTINug1KTeqd6PlxpYZ/s0/negro3.jpg" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#EB6E14'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4UzrkIFljnNU5svvjW2dnONSkvhLhxsnjNzoCuevt9sthssuTkDU4KgQF4kLpACCDvajQbIrYvm4VctbsJHHWrl7sxeibCwWS9L3mMPR3Gu3J9W5596z3RaYDQ2QsqF-NF1z/s0/naranja6.jp" /></a>
</div>

Esto es una imagen, para ver el ejemplo click sobre ella.

Cada cuadrito es una imagen y la url de cada imagen será el enlace que hará cambiar el color de fondo de body.

Si seguimos jugando descubrimos que también es posible hacerlo con texturas en lugar de colores, lo conseguimos de la siguiente forma:

<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsSR1yvuKkJ4gYf3kT2LNBTil2JHcJObOXs1Wj9hHMwTASMe6epqNz9DVJypA4z2-XspMkvpIYncq3anxaZizCExhEcNroobqolzh6Y812DjEquBmfC-VUOr2jndfdUU6NpD4/s200/fondo1.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidsSR1yvuKkJ4gYf3kT2LNBTil2JHcJObOXs1Wj9hHMwTASMe6epqNz9DVJypA4z2-XspMkvpIYncq3anxaZizCExhEcNroobqolzh6Y812DjEquBmfC-VUOr2jndfdUU6NpD4/s200/fondo1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXkSHwPm4JZRQ5HMn9DH0EmJn2cWSSSKlgNWEBC0LT662Slo-RsJ7fnOnzb_m7jLCfpZo_dpsZDj8CVk1j2-5vdP-ANjhS08OpsKgtE5m3UDiJKmJP0Pb9ozDSuh1t0eYHfaT/s200/fondo2.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikXkSHwPm4JZRQ5HMn9DH0EmJn2cWSSSKlgNWEBC0LT662Slo-RsJ7fnOnzb_m7jLCfpZo_dpsZDj8CVk1j2-5vdP-ANjhS08OpsKgtE5m3UDiJKmJP0Pb9ozDSuh1t0eYHfaT/s200/fondo2.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_lstxN2OLqVL4_GjBwap8PA0jymIUJ8v6n6JoxVryxpa9TE_HP-713MzGNQZIuNH40liSAC3LFni0joR09IV52eqhbc8BOI08251JBs3E0h7hTU2ohI9XraDpTfR53y5lL52/s200/fondo3.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ_lstxN2OLqVL4_GjBwap8PA0jymIUJ8v6n6JoxVryxpa9TE_HP-713MzGNQZIuNH40liSAC3LFni0joR09IV52eqhbc8BOI08251JBs3E0h7hTU2ohI9XraDpTfR53y5lL52/s200/fondo3.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4E_8-Uhh8KgbCmU4lNZV1Ijr5KGTLEKqk0hSW_46spobLNWEOFJIXXzT60a5X2w5s8X4qvy2RA-G7gFCme2Ipy_YgLiyH3PW4T_bX6qldhh-3qBb97fc_GXaRPHdkkahgNCy/s200/fondo4.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4E_8-Uhh8KgbCmU4lNZV1Ijr5KGTLEKqk0hSW_46spobLNWEOFJIXXzT60a5X2w5s8X4qvy2RA-G7gFCme2Ipy_YgLiyH3PW4T_bX6qldhh-3qBb97fc_GXaRPHdkkahgNCy/s200/fondo4.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhObJTz8PQGAiDR-MjChjOGUWv0BxyjRiFdQso18aIh75L1DShZ-ufdjjCr0DsJRJC1zt7AM6zGT5OrazyqjRygZLfrhWBeRCMtQMN3HBQUxEy9ILL1_817Xrk91PK5gpqVVlg/s200/fondo5.jpg)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhObJTz8PQGAiDR-MjChjOGUWv0BxyjRiFdQso18aIh75L1DShZ-ufdjjCr0DsJRJC1zt7AM6zGT5OrazyqjRygZLfrhWBeRCMtQMN3HBQUxEy9ILL1_817Xrk91PK5gpqVVlg/s200/fondo5.jpg" /></a>
</div>

Como se puede ver hemos cambiado backgroundColor por backgroundImage, es necesario añadir la url de la imagen dos veces una para el fondo y otra para la miniatura que mostramos.

El tamaño de las miniaturas lo podemos modificar con width para la anchura y height para la altura.

Crear fotomontajes en SeeNow es muy sencillo simplemente cargamos la fotografía, la movemos para que coincidan los ojos en la plantilla que escogimos  y rotamos la imagen hasta situarla en el lugar indicado , guardamos la imagen con el botón naranja de la derecha y ya tenemos nuestra obra de arte para reírnos de nosotros mismos o mandarla a los amigos y que se rían ellos también.

Estilo Polaroid para estos iconos a redes sociales, contiene 16 iconos en formato PNG.

YouTube , Delicious, RSS , Twitter , Facebook , Flickr , Digg , stumpleupon , MySpace, Feedburner , Skype , Yahoo, Last.fm , Linkin , Reddit y Gmail.

Rereferencia y descarga: webtoolkit4.me

En Scrapee.net podemos jugar con imágenes y añadirles efectos.

¿Qué cosas podemos hacer? por ejemplo añadir marcos, escribir sobre las fotografías, añadir efecto agua, recortar, cambiar el rostro, crear wallpapers, redimensionar, montajes, añadir brillitos más conocidos por glitter, gif animados.

Al igual que muchos sitios suelen hacer cuando descargamos la imagen nos damos cuenta que lleva un texto con el nombre de la página, queda poco estético la verdad, personalmente pienso que si los sitios que suelen hacerlo omitieran ese detalle se usarían más los servicios que proporcionan.

Plantillas para Blogger Colorize Templates

En encreamundo.com podemos encontrar más de 9.800 fuentes tipográficas y descargarlas de forma gratuita, además ofrecen la posibilidad de descargar todas las fuentes juntas empaquetadas en un único archivo al un precio de 6.50€. Algo que me ha gustado mucho es la posibilidad de visualizar nuestro propio texto antes de descargar la fuente.

Si eres aficionado a las fuentes este otro enlace de Bloc de apuntes te vendrá muy bien.

En ¿Cómo se hace? el blog que actualiza y mantiene Vku he visto una imagen con la particularidad que contiene un botón de cerrar, cuando hacemos click sobre el botón la imagen desaparece, en un principio quizás no se vea nada del otro mundo pero tiene su utilidad cuando se trata de mostrar contenido de interés y que este tenga un lugar preferente sin llegar a molestar la lectura. Es necesario utilizar un script y lógicamente el contenido que deseamos mostrar.

La forma de añadirlo es la siguiente, justo antes de </head> añadimos el script:

<script>

function cerrarimagen(){

div = document.getElementById("cerrar");

div.style.display="none";

}

</script>

Y el bloque de añadir las imágenes después de <body>

<div id='cerrar' style='border: 0 !important; background: transparent; left:830px;top:60px;position:fixed;width: 60px;z-index:9999'> <a href='javascript:cerrarimagen();'><img src='url-imagen-cerrar' style='float: right;' title='Cerrar'/><img src='url-imagen-a-mostrar'/></a></div>

Para el ejemplo no he sido muy imaginativa dada la euforia que se vive ahora mismo en la calle con el mundial y a media hora de comenzar el partido que pasará a la historia así que añadí la misma idea que nuestro amigo de ¿Cómo se hace?

* Con width movemos la imagen a mostrar hacia la izquierda o derecha.

* La imagen de cerrar la añadimos ayudándonos de left y top porque según el tamaño de la imagen nos quedará en una esquina u otra.

* Con float: right indicamos si la imagen la añadimos a la derecha y con float: left en caso de ser a la izquierda.

Referencia y descarga:
Pink Moustache

Hace unas semanas me preguntaban la forma de conseguir que al marcar sobre el enlace de autor nos llevara a la página principal del blog en lugar de hacerlo al perfil. El enlace o nombre de autor lo podemos encontrar en los comentarios junto al avatar.

Ese enlace lo localizamos si marcamos para expandir la plantilla y buscamos lo siguiente:

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <span class='autorcomentario'><data:comment.author/></span></a>

<b:else/>

<span class='autorcomentario'> <data:comment.author/></span>

</b:if>

La etiqueta <data:comment.author/> es la que genera el nombre de autor, podemos sustituirla por cualquier otro nombre.

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <span class='autorcomentario'><data:comment.author/></span></a>

<b:else/>

<span class='autorcomentario'>cualquier nombre</span>

</b:if>

La url del perfil la encontraremos donde dice:

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>

Ese data:comment.authorUrl es una url única, si accedemos a nuestro perfil la veremos en la barra del navegador y es algo así:

http://www.blogger.com/profile/aquí veremos una larga numeración.

Lo que haremos será sustituir data:comment.authorUrl por la url de nuestro blog y donde dice: <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> suprimimos expr:

<a href='aquí-la-url-del-blog' rel='nofollow' target='_blank'>

Con ese cambio cada vez que alguien marque sobre nuestro nombre le llevará a la página principal de nuestro blog.

Antes o después todos terminamos añadiendo iconos a las redes sociales que solemos utilizar, en Animhunt podemos descargar este pack que contiene 15 iconos con motivos de tazas de café y pueden usarse para uso personal.

REFERENCIA:ARTEgamy

Demo | Descarga

Visiting card es una plantilla para mostrar nuestra actividad en redes sociales, presentación de trabajos o breve contenido. Puede descargarse desde la página del autor donde encontraremos las explicaciones para su instalación.

Con el verano la sandía llega a nuestras mesas, es una fruta que se puede convertir en una obra de arte, eso si, con grandes dosis de paciencia.

Sorprendida, muy sorprendida he quedado cuando he visto que accediendo por Blogger in Draft tenemos en escritorio un nuevo enlace que nos muestra las estadísticas de cada blog. No hay que instalar nada, simplemente accedemos y comprobaremos que el tráfico de nuestro blog es analizado casi en tiempo real.

Podemos ver que entradas están recibiendo mayor número de visitas, y desde que sitios llegan. Incluso si nuestras entradas son compartidas en Twitter veremos que aumenta el tráfico indicando la procedencia de ese tráfico.También nos indica las palabras claves por las que llegan a nuestro blog y los navegadores utilizados.

Reconozco que aunque no soy amiga de añadir contadores o comprobar estadísticas ha sido una sorpresa, no por la utilidad de esta novedad sino porque quiere decir que Blogger sigue trabajando y por consiguiente mejorando. ¡ Bien por Blogger! y que siga...

La información que proporciona es muy completa, hay para entretenerse y curiosear un buen rato, en Blogger in Draft encontraremos más información.

Hace tiempo veíamos la forma de añadir iconos de redes sociales en nuestra sidebar, y ayer mismo Espartana86 Diva Ecologista me sugería la posibilidad de explicar la forma añadir un icono RSS y otro con el típico sobrecito para la suscripción vía EMail. Su idea es añadir sus propios iconos cosa que podrá hacer sustituyendo simplemente la url de las imágenes del ejemplo por las suyas.

SUSCRIBIRSE VIA RSS SUSCRIBIRSE VIA E-MAIL

Los iconos del ejemplo podemos añadirlos en nuestra sidebar en un gadget de HTML,  en su interior añadimos los estilos y las imágenes que harán de enlace para hacer posible la suscripción.

<div id="suscribirse">

<div class="suscribirse2">

<h2 class="suscripcion rss">

<a href="http://feeds.feedburner.com/GemaBlog">SUSCRIBIRSE VIA RSS</a></h2>

<h2 class="suscripcion email">

<a href="http://feedburner.google.com/fb/a/mailverify?uri=GemaBlog">SUSCRIBIRSE VIA E-MAIL</a></h2>

</div> </div>

<style type='text/css'>

#suscribirse .suscribirse2 h2.suscripcion { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:11px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif; font-weight:bold; }

#suscribirse .suscribirse2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Bx8ZOTlM90v-TPxa0PbNUM7lfOWUM2foC6FhjO_7r3pTZGinxyyT6QfRdMZbfxy6DBdcSsA9y1Y9lhmLdfIJw-l4lQPnIJ52z0NsdIyT0srkLBxbE1VxaaLlhOo5JFfukZK7/s0/ico-rss.png) no-repeat top left; }

#suscribirse .suscribirse2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs974xcwrFZ-wooovQgygzhlgy6Tnk_QGwgBNI9ommZbR0eUvUeXMrKqw0Hu0SyH2ZtWsN9WsqeVU09AlW3_xRCv0LVjpTb0vgAcbr3Agk6oe8snAByaCGAIKUrKtday1e0s95/s0/ico-mail.png) no-repeat top left; }

#suscribirse .suscribirse2 .suscripcion a { color:#000; text-decoration:none; }

</style>

En color verde es donde debemos sustituir GemaBlog por vuestro nombre en Feeburner.

En color azul las imágenes, todos sabemos que es conveniente descargarlas y alojarlas en nuestro blog o álbum de Picasa.

Una vez lo tenemos añadido si queremos podemos añadirle un borde para destacar el gadget, eso lo podemos hacer añadiendo un nuevo id justo antes de la primera línea, sería algo así:

<div id="borde-suscribirse">
<div id="suscribirse">
<div class="suscribirse2">
<h2 class="suscripcion rss">

aquí va el código anterior...

</div></div></div>

Los estilos del borde los añadimos con la siguiente línea:

<style type='text/css'>

estilos anteriores...

#borde-suscribirse { border: 1px solid #C0C0C0; padding:10px;  }
</style>

Nos resultaría algo así:

SUSCRIBIRSE VIA RSS SUSCRIBIRSE VIA E-MAIL

22 iconos minimalistas de libre uso sobre redes sociales:
Digg, Facebook, Flickr, FriendFeed, LinkedIn, Myspace, Newsvine, Plurk, Reddit, RSS Icon, StumbleUpon, Technorati, tumblr, Twitter, Twitter, Vimeo, WordPress, YouTube

REFERENCIA:Arsgrafik